<template>
    <div class="menu-list-container" :class="collapsed ? 'w-80' : 'w-190'">
        <a-menu
            mode="inline"
            theme="light"
            :inline-collapsed="collapsed"
            :defaultSelectedKeys="defaultSelectedKeys"
            :defaultOpenKeys="defaultOpenKeys"
            @click="handleClick"
            :key="key"
        >
            <template v-for="item in treeData">
                <a-menu-item :key="item.id" v-if="!item.children.length">
                    <nuxt-link :to="item.code || '/home'">
                        <icon-svg :name="item.icon ? item.icon.trim() : 'home'" class="svg"></icon-svg>
                        <icon-svg
                            :name="item.icon ? `${item.icon.trim()}_active` : 'home'"
                            class="svg-active"
                        ></icon-svg>
                        <span>{{ item.name }}</span>
                    </nuxt-link>
                </a-menu-item>
                <a-sub-menu :key="item.id" v-else>
                    <span slot="title">
                        <icon-svg :name="item.icon ? item.icon.trim() : 'home'" class="svg"></icon-svg>
                        <icon-svg
                            :name="item.icon ? `${item.icon.trim()}_active` : 'home'"
                            class="svg-active"
                        ></icon-svg>
                        <span>{{ item.name }}</span>
                    </span>
                    <template v-for="it in item.children">
                        <a-menu-item :key="it.id">
                            <nuxt-link :to="it.code || '/home'">
                                {{ it.name }}
                            </nuxt-link>
                        </a-menu-item>
                    </template>
                </a-sub-menu>
            </template>
        </a-menu>
        <div class="btn" @click="toggleCollapsed">
            <template v-if="!collapsed">
                <img src="@/assets/images/login/icon02.png" alt="" />
                <span>收起菜单</span>
            </template>
            <template v-else>
                <img src="@/assets/images/login/icon02.png" alt="" style="transform: rotate(180deg)" />
            </template>
        </div>
    </div>
</template>

<script>
export default {
    name: 'MenuList',
    inject: ['layout'],
    data () {
        return {
            collapsed: false,
            treeData: [],
            defaultSelectedKeys: [],
            defaultOpenKeys: [],
            key: 0
        }
    },
    watch: {
        // 监听数据变化，及时提交给父组件
        $route: {
            deep: true,
            handler (route) {
                this.getCurrent()
            }
        }
    },
    created () {
        this.getTree()
    },
    methods: {
        async getTree () {
            const res = await this.$ApiServer['menu/list']()
            if (res.code === 200) {
                this.treeData = res.data
                this.getCurrent()
            } else {
                this.$message.error('获取菜单失败')
                setTimeout(() => {
                    this.$store.dispatch('user/logout')
                }, 500)
            }
        },
        toggleCollapsed () {
            this.collapsed = !this.collapsed
            this.layout.collapsed = this.collapsed
        },
        getCurrent () {
            this.defaultOpenKeys = this.treeData.map(item => item.id)
            let id = []
            const path = this.$route.path
            const routerPathArr = [
                ['/need-manage/investment-promotion-list', '/need-manage/investment-promotion'],
                ['/need-manage/town-service-list', '/need-manage/townService'],
                [
                    '/need-manage/service-list',
                    '/need-manage/houses',
                    '/need-manage/plot',
                    '/need-manage/talents',
                    '/need-manage/product',
                    '/need-manage/service'
                ]
            ]
            this.treeData.forEach((item) => {
                if (item.code === path || (path.indexOf(item.code) > -1 && item.code)) {
                    id = [item.id]
                } else if (item.children) {
                    item.children.forEach((it) => {
                        if (it.code === path || path.indexOf(it.code) > -1) {
                            id = [item.id, it.id]
                        }
                        if (path.includes('need-manage')) {
                            routerPathArr.forEach((_item) => {
                                const arr = _item.filter(_it => _it === path)
                                if (arr.length) {
                                    if (_item[0] === it.code) {
                                        id = [item.id, it.id]
                                    }
                                }
                            })
                        }
                    })
                }
            })
            this.defaultSelectedKeys = id
            this.key++
        },
        handleClick ({ item, key, keyPath }) {
            this.getCurrent()
        }
    }
}
</script>

<style scoped lang="less">
.ant-menu-vertical .ant-menu-item,
.ant-menu-vertical-left .ant-menu-item,
.ant-menu-vertical-right .ant-menu-item,
.ant-menu-inline .ant-menu-item,
.ant-menu-vertical .ant-menu-submenu-title,
.ant-menu-vertical-left .ant-menu-submenu-title,
.ant-menu-vertical-right .ant-menu-submenu-title,
.ant-menu-inline .ant-menu-submenu-title {
    margin-top: 0;
}

.menu-list-container {
    height: 100%;
    overflow: hidden;
    box-shadow: 1px 0px 0px rgba(153, 153, 153, 0.1);

    ::v-deep {
        .ant-menu {
            border: none;
            height: calc(100% - 44px);
            overflow-y: auto;
            overflow-x: hidden;
        }
    }
}

.btn {
    width: 100%;
    height: 44px;
    background: linear-gradient(270deg, #ffffff 0%, #c2ffdd 100%);
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    img {
        width: 9px;
        height: 10px;
    }

    span {
        margin-left: 10px;
        color: @primary-color;
    }
}

.w-190 {
    width: 190px !important;
}

.w-80 {
    width: 80px !important;

    a {
        span {
            opacity: 0;
        }
    }

    .ant-menu-root {
        .ant-menu-submenu-title {
            span {
                span {
                    opacity: 0;
                }
            }
        }
    }
}

.ant-menu-root {
    .svg {
        display: inline-block;
    }

    .svg-active {
        display: none;
    }

    & > .ant-menu-item {
        a {
            span {
                margin-left: 10px;
                color: #2a2a2a;
            }
        }

        &.ant-menu-item-selected {
            a {
                color: @primary-color !important;

                span {
                    color: @primary-color;
                }
            }
        }
    }

    .ant-menu-submenu-title {
        span {
            span {
                margin-left: 10px;
                color: #2a2a2a;
            }
        }
    }

    .ant-menu-sub {
        & > .ant-menu-item {
            padding-left: 55px !important;

            a {
                color: #666666;
            }
        }
    }

    ::v-deep .ant-menu-submenu-arrow {
        color: #2a2a2a;
    }

    .nuxt-link-exact-active,
    .nuxt-link-active {
        color: @primary-color !important;
    }
    .ant-menu-submenu-selected .ant-menu-submenu-title span {
        color: @primary-color !important;
    }

    .ant-menu-item-selected,
    .ant-menu-submenu-selected {
        .svg {
            display: none;
        }

        .svg-active {
            display: inline-block;
        }
    }
}

.ant-menu-item-selected {
    color: @primary-color !important;
    background: linear-gradient(270deg, #ffffff 0%, #c2ffdd 100%);
}

.ant-menu-item-selected > a {
    color: @primary-color !important;
}

.ant-menu-inline .ant-menu-selected::after,
.ant-menu-inline .ant-menu-item-selected::after {
    display: none;
}

.ant-menu-vertical > .ant-menu-item,
.ant-menu-vertical-left > .ant-menu-item,
.ant-menu-vertical-right > .ant-menu-item,
.ant-menu-inline > .ant-menu-item,
.ant-menu-vertical > .ant-menu-submenu > .ant-menu-submenu-title,
.ant-menu-vertical-left > .ant-menu-submenu > .ant-menu-submenu-title,
.ant-menu-vertical-right > .ant-menu-submenu > .ant-menu-submenu-title,
.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
    height: 44px;
    line-height: 44px;
}
.ant-tooltip {
    svg {
        display: none;
    }
}
</style>
